<script setup lang="ts">
import { ref } from 'vue'
import { NCard, NSpace, NButton, NAlert } from 'naive-ui'

const count = ref(0)

// 触发 Vue 组件错误
function triggerVueError(): void {
  throw new Error('这是一个 Vue 组件错误')
}

// 触发 Promise 错误
function triggerPromiseError(): void {
  Promise.reject(new Error('这是一个未捕获的 Promise 错误'))
}

// 触发资源加载错误
function triggerResourceError(): void {
  const img = document.createElement('img')
  img.src = 'https://invalid-url-that-does-not-exist.com/image.jpg'
  document.body.appendChild(img)
  setTimeout(() => document.body.removeChild(img), 1000)
}

// 正常操作
function normalOperation(): void {
  count.value++
}
</script>

<template>
  <n-card title="错误边界测试" class="max-w-600px mx-auto mt-8">
    <n-space vertical :size="16">
      <n-alert type="warning" title="测试说明">
        点击下方按钮触发不同类型的错误，观察错误处理效果。错误会被自动捕获并记录日志，同时显示用户友好的提示。
      </n-alert>

      <div>
        <p class="text-sm text-gray-600 mb-2">正常操作计数</p>
        <p class="text-2xl font-bold">{{ count }}</p>
      </div>

      <n-space vertical>
        <n-button type="success" @click="normalOperation">正常操作 +1</n-button>
        <n-button type="error" @click="triggerVueError">触发 Vue 错误</n-button>
        <n-button type="error" @click="triggerPromiseError">触发 Promise 错误</n-button>
        <n-button type="error" @click="triggerResourceError">触发资源加载错误</n-button>
      </n-space>

      <n-alert type="info" title="提示">
        错误触发后，应用不会崩溃，可以继续正常操作。查看控制台和日志文件可以看到详细的错误信息。
      </n-alert>
    </n-space>
  </n-card>
</template>
